<template>
  <el-form
    :inline="true"
    label-position="top"
    style="width: 100%"
    :model="modelData"
    :rules="rules8"
  >
    <el-row style="width: 100%">
      <el-col :span="item.span" :key="item.field" v-for="item in config8">
        <el-form-item
          :label="item.label"
          class="left-align-label"
          :prop="item.field"
          :style="{
            '--label-color': shouldLabelBeRed(item.field) ? 'red' : 'black',
          }"
        >
          <el-input
            v-if="item.component === 'Input'"
            v-model="modelData[item.field]"
            v-bind="item.componentProps"
            @input="handleInput(item.field)"
          />
          <el-select
            v-if="item.component === 'Select'"
            v-model="modelData[item.field]"
            v-bind="item.componentProps"
            @change="handleInput(item.field)"
          >
            <el-option
              :label="jtem.label"
              :value="jtem.value"
              :key="jtem.value"
              v-for="jtem in item.componentProps.options"
            ></el-option>
          </el-select>
          <el-date-picker
            v-if="item.component === 'DatePicker'"
            v-model="modelData[item.field]"
            v-bind="item.componentProps"
            @change="handleInput(item.field)"
          />
          <el-radio-group
            v-if="item.component === 'RadioGroup'"
            v-model="modelData[item.field]"
            v-bind="item.componentProps"
            @change="handleInput(item.field)"
          >
            <el-radio
              :value="jtem.label"
              :key="jtem.value"
              size="large"
              v-for="jtem in item.componentProps.options"
              >{{ jtem.value }}</el-radio
            >
          </el-radio-group>
          <el-checkbox-group
            v-if="item.component === 'CheckboxGroup'"
            v-model="modelData[item.field]"
            v-bind="item.componentProps"
          >
            <el-checkbox
              :label="jtem.label"
              :value="jtem.value"
              :key="jtem.value"
              v-for="jtem in item.componentProps.options"
            />
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { config8, rules8 } from "./config.js";

const modelData = ref({});
const store = useStore();

const handleInput = (field) => {
  const res = store.state.basicInfo.data.filter(
    (item) => item.tagName == field
  ); // 判断服务端是否返回了键值对
  console.log("res", res);
  store.commit("updateBasicInfo", {
    field,
    value: modelData.value[field],
  });
};

onMounted(() => {
  const basicInfo = store.getters.getBasicInfo;
  Array.from(basicInfo.data).forEach((item) => {
    if (item.tagName === "申请日期") {
      modelData.value["申请日期"] = new Date(item.tagValue);
    } else {
      modelData.value[item.tagCode] = item.tagValue;
    }
  });
  console.log(modelData.value);
});
// 新增：判断是否应该显示红色label
const shouldLabelBeRed = computed(() => (field) => {
  // 1. 字段是必填项 且 2. 字段值为空
  return isFieldRequired(field) && !modelData.value[field];
});

// 判断字段是否是必填项
const isFieldRequired = (field) => {
  return rules8[field]?.some((rule) => rule.required);
};
</script>
<style scoped>
.left-align-label :deep(.el-form-item__label) {
  text-align: left;
  color: var(--label-color);
}

/* 必填项的红色星号样式 */
.left-align-label:deep(.el-form-item.is-required .el-form-item__label:before) {
  color: var(--el-color-danger);
}
</style>
